<template>
  <view class="login_outer">
    <beginOuterBox>
      <view slot="begintopImg" >
        <image class="begin_title_img" src="@/static/begin/begintop.png" v-if="isShowLogo"></image>
      </view>
      <view slot="hellow">Hello!</view>
      <view slot="titleText">欢迎来到新潮资讯</view>
      <!-- 登录页 -->
      <view class="login_content_btnbox" slot="content">
        <u--form labelPosition="left" ref="uForm">
          <u-form-item ref="item1">
            <view class="login_content_phone">
              <view class="login_content_phone_ipt">
                <u--input
                  border="none"
                  placeholder="请输入唯一验证码"
                  v-model="onlyCode"
                  @blur="isShowLogo=true" @focus="isShowLogo=false"
                >
                </u--input
              ></view>
            </view>
          </u-form-item>
          <u-form-item ref="item2">
            <view class="login_content_phone_hign">
              <view class="login_content_phone_hign_img"
                >
                <!-- <image src="@/static/login/warning.png"></image
              > -->
            </view>
              <view class="login_content_phone_hign_text"
                >
                <!-- <text>获取验证码方式</text> -->
                </view
              >
            </view>
          </u-form-item>
          <u-form-item ref="item3">
            <view class="login_content_verification_affirm">
              <view @click="getOnlyVerification">
                <text>确定</text>
              </view>
            </view>
          </u-form-item>
        </u--form>
      </view>
    </beginOuterBox>
  </view>
</template>

<script>
import beginOuterBox from "@/components/beginOuterBox.vue";
import { reqOnlyVerify } from "@/api/verification.js";
import { mapState } from "vuex";

export default {
  data() {
    return {
      onlyCode: "",
      isShowLogo: true

    };
  },
  onShow(){
    clearTimeout(this.KlineTimer)
    clearInterval(this.newKlineTimer)
  },
  methods: {
    // 跳转选择登录或注册页面
    goBeginPage() {
      uni.navigateTo({
        url: "/pages/login/index",
      });
    },
    // 验证唯一验证码
    async getOnlyVerification() {
      if (!this.onlyCode) {
        uni.showToast({
          title: "请输入唯一验证码",
          icon: "error",
        });
        return;
      }
      const result = await reqOnlyVerify({ code: this.onlyCode });
      if (result.code == 200) {
        uni.setStorageSync("onlyCode", this.onlyCode);
        uni.navigateTo({
          url: "/pages/login/index",
        });
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
  },
  computed:{
    ...mapState(['newKlineTimer','KlineTimer'])
  },
  components: {
    beginOuterBox,
  },
};
</script>

<style lang="scss" scoped>
.login_outer {
  width: 100vw;
  height: 100vh;
  .begin_title_img {
      width: 126rpx;
      height: 126rpx;
      position: absolute;
      top: 62rpx;
      left: 58rpx;
    }
  .login_content_btnbox {
    z-index: 999;
    position: absolute;
    top: 142rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .login_content_phone {
      width: 545rpx;
      height: 108rpx;
      border: 3px solid #ff9e3c;
      border-radius: 38rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .login_content_phone_ipt {
        width: 404rpx;
      }
    }
    .login_content_phone_hign {
      display: flex;
      align-items: center;
      margin-top: -30rpx;
      .login_content_phone_hign_img {
        width: 32rpx;
        height: 32rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .login_content_phone_hign_text {
        font-size: 21rpx;
        font-family: DreamHanSansSC;
        font-weight: normal;
        text-decoration: underline;
        color: #302b27;
        margin-left: 10rpx;
      }
    }
    .login_content_verification_affirm {
      position: fixed;
      display: flex;
      justify-content: center;
      margin-top: 120rpx;
      view {
        width: 545rpx;
        height: 108rpx;
        background: linear-gradient(to right, #ff7007 0%, #ffa749 100%);
        border-radius: 38rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        text {
          font-size: 38rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
